<template>
    <view class="care b-24 ph-28 pv-28 mb-20" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
        <view class="f ai-c">
					<u-avatar :src="item.avatar" size="80rpx"></u-avatar>
            <view class="ml-16">
                <view class="fs-30 fw-600 text-color4">{{item.memberNickname?item.memberNickname:'匿名用户'}}</view>
                <!-- <view class="fs-24 text-color3 mt-4">6小时前</view> -->
            </view>
        </view>
        <view class="mt-28 fs-28 text-color4 text-ellipsis-2">
			{{item.content}}
		</view>
        <image :src="item.img" class="w-360 b-24 h-480 mt-16" mode="aspectFill" v-if="item.img"></image>
        <view class="comment w-f b-12 ph-24 pt-24 pv-24">
						<view v-for="(value,key) in item.comment" :key="key">
							<view class="mb-8" v-if="key<2">
							    <text class="fs-28 text-color3">{{value.memberNickname?value.memberNickname:'匿名用户'}}：</text>
							    <text class="fs-28 text-color4" style="word-break:break-all;">{{value.commentContent}}</text>
							</view>
						</view>
            

            <view class="fs-28 text-color3">共{{item.commentCount||0}}条评论</view>
        </view>
        <view class="f ai-c jc-s-b mt-32">
            <view class="f ai-c jc-c w-228 h-72 b-72 publish" @click.stop="comment(item)">
                <image src="http://cwht.ricecs.cn/app/novice/edit.png" class="w-40 h-40 b-40 mr-12"></image>
                <view class="fs-24 text-color4">我来发表…</view>
            </view>
            <view class="f ai-c">
                <view class="f ai-c ml-40 fs-28 fw-600 " :class="item.followEnabled ? 'text-color' : 'text-color4'" @click.stop="handleFollow(item, index, 'l')">
                    <image src="http://cwht.ricecs.cn/app/novice/collected.png" v-if="item.followEnabled" class="w-50 h-50 mr-12"></image>
										<image src="http://cwht.ricecs.cn/app/novice/collect.png" v-else class="w-50 h-50 mr-12"></image>
					      {{item.followCount||0}}
                </view>
                <view class="f ai-c ml-40 fs-28 fw-600 text-color4">
                    <image src="http://cwht.ricecs.cn/app/novice/comment.png" class="w-40 h-40 mr-12"></image>
                    {{item.commentCount||0}}
                </view>
                <view class="f ai-c ml-40 fs-28 fw-600 " :class="item.likeEnabled ? 'text-color' : 'text-color4'" @click.stop="handleZan(item, index, 'l')">
                    <image src="http://cwht.ricecs.cn/app/novice/zaned.png" v-if="item.likeEnabled" class="w-40 h-40 mr-12"></image>
										<image src="http://cwht.ricecs.cn/app/novice/zan.png" v-else class="w-40 h-40 mr-12"></image>
                  {{item.likeCount||0}}
                </view>
            </view>
        </view>

      
    </view>
</template>
<script setup lang="ts">
import {contentPage, commentGet, likeIncrese, likeDecrese, followIncrese, followDecrese} from '@/services/api/novice';
import { ref } from 'vue';
import { text } from 'stream/consumers';
const list = ref<any[]>([]);
const listQuery = ref({
    pageNo: 1,
    pageSize: 10,
	followFlag:true
});
getList();
//关注列表
async function getList() {
   const { data } = await contentPage(listQuery.value);
  console.log(listQuery.value)
   if (data.list.length > 0) {
       data.list.forEach(async (item: any, index: number) => {
           if (item.urls) {
               item.img = item.urls.split(',')[0];
           }
		   let res = await commentGet({ contentId: item.id });
			item.comment = res.data
			list.value.push(item);
       });

   }
}
//评论
function comment(item: any) {
  if (item.urls) {
      uni.navigateTo({
          url: `/pages_novice/trendsDetail?id=${item.id}&show=1`,
      });
  } else {
      uni.navigateTo({
          url: `/pages_novice/videoDetail?id=${item.id}&show=1`,
      });
  }
}
function upDate() {
  listQuery.value.pageNo = 1;
  list.value = [];
  getList();
}
async function handleZan(item: any, index: number, type: string) {
  if (!item.likeEnabled) {
    await likeIncrese({ id: item.id });
    list.value[index].likeCount = list.value[index].likeCount + 1;
  } else {
    await likeDecrese({ id: item.id });
    list.value[index].likeCount = list.value[index].likeCount - 1;

  }
  list.value[index].likeEnabled = !list.value[index].likeEnabled;
}
async function handleFollow(item: any, index: number, type: string) {
  if (!item.followEnabled) {
    await followIncrese({ id: item.id,followedId:item.memberId });
    list.value[index].followCount = list.value[index].followCount + 1;
  } else {
    await followDecrese({ id: item.id,followedId:item.memberId });
    list.value[index].followCount = list.value[index].followCount - 1;

  }
  list.value[index].followEnabled = !list.value[index].followEnabled;
}
function onPullDownRefresh() {
    listQuery.value.pageNo = 1;
    list.value = [];
    getList();
}
function onReachBottom() {
    listQuery.value.pageNo++;
    getList();
}
const toDetail = (item:any) => {
    if (item.urls) {
        uni.navigateTo({
            url: `/pages_novice/trendsDetail?id=${item.id}`,
        });
    } else {
        uni.navigateTo({
            url: `/pages_novice/videoDetail?id=${item.id}`,
        });
    }
};
defineExpose({ onPullDownRefresh, onReachBottom });
</script>
<style lang="scss" scoped>
.care {
    background: #fff;
    .publish {
        background: #f8f8f8;
        border: 1rpx solid #dddddd;
    }
    .comment {
        background: #f8f8f8;
    }
}
</style>
